<template>
  <!--k线-->
  <div class="k_content" id="kline_kline" style="width: 100%;height: 100%;">
    <div id="main_kline"><div style="color: #fff;">数据正在加载 请稍后...</div></div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import * as echarts from 'echarts';
import kline from '@/components/kline/kline.js';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */,
    navtopheight: state => state.navtopheight /* 分隔面板高度 */,
    timelist: state => state.klinetime /* 时间选择器 */
  }),
  data() {
    return {
      time: 1,
      klineInterval: null,
      isright: false,
      mychartkline: null
    };
  },
  beforeDestroy() {
    if (this.klineInterval) {
      clearInterval(this.klineInterval);
    }
    this.klineInterval = null;
  },
  watch: {
    timelist(val) {
      // console.log(val);
      this.init(val);
    },
    select(val) {
      let mychartkline = document.getElementById('main_kline');
      mychartkline.style.width = $('#kline_kline').width() + 'px';
      mychartkline.style.height = $('#kline_kline').height() + 'px';
      this.mychartkline = echarts.init(mychartkline);
      this.init('6000');
    },
    /* 分隔面板高度*/
    navtopheight(val) {
      let mychartkline = document.getElementById('main_kline');
      mychartkline.style.width = $('#kline_kline').width() + 'px';
      mychartkline.style.height = $('#kline_kline').height() + 'px';
      this.mychartkline = echarts.init(mychartkline);
      this.mychartkline.resize();
    }
  },
  mounted() {
    let mychartkline = document.getElementById('main_kline');
    mychartkline.style.width = $('#kline_kline').width() + 'px';
    mychartkline.style.height = $('#kline_kline').height() + 'px';
    this.mychartkline = echarts.init(mychartkline);
    this.init('6000');
  },
  components: {},
  methods: {
    init(range) {
      var that = this;
      clearInterval(that.klineInterval);
      that.klineInterval = null;
      this.initRkline(this.select.code, range); //  初始化
      that.klineInterval = setInterval(res => {
        that.initRkline(this.select.code, range, true);
      }, 1500); //  两秒一次刷新图表
    },

    //  初始化K线图
    initRkline(symbol, time, update = false) {
      let that = this;
      symbol = symbol ? symbol : (symbol = this.select.code);
      if (!symbol) {
        symbol = this.select.code;
      }

      this.$get('addons/tf-futures/get-kline/app-kline?symbol=' + symbol + '&range=' + time).then(res => {
        if (res.data.lines.length > 0) {
          // if(true){
          //   this.mychartkline.setOption(kline.initKOption(res.data.lines));
          //   this.mychartkline.setOption({
          //     xAxis:{
          //       min:res.data.dataMin,
          //       max:res.data.dataMax,
          //     },
          //   });
          // }
          // else{
          //   this.mychartkline.setOption(kline.updateKOption(res.data.lines));
          //   this.mychartkline.setOption({
          //     xAxis:{
          //       min:res.data.dataMin,
          //       max:res.data.lines.length,
          //     },
          //   });
          // }
          if(!update){
              that.mychartkline.setOption(kline.initKOption(res.data.lines));
          }else{
            //console.log('updateK线');
            //  更新K线
            var data = kline.splitData(res.data.lines);
            var macd = kline.calcMACD(12, 26, 9, data.datas, 1);
            that.mychartkline.setOption({
              xAxis:{
                data: data.times,
              },
              series: [{
                data: data.datas,
              }]
            });
          }

        }else{
          console.log("app-kline没有数据");
          if (this.klineInterval) {
            clearInterval(this.klineInterval);
          }
          this.klineInterval = null;
          this.mychartkline.setOption(kline.initKOption(data.knedata0));
        }
      });
    }
  }
};
</script>

<style scoped></style>
